<template>
  <div class="dialogs">
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
        <el-form
          ref="form"
          :model="formData"
          :rules="form_rules"
          label-width="120px"
          style="margin: 10px; width: auto">
          <el-form-item label="收支类型:">
            <el-select v-model="formData.type" placeholder="收支类型">
              <el-option v-for="(formtype, index) in format_type_list"
                :key="index" :label="formtype" :value="formtype"
              />
            </el-select>
          </el-form-item>
           <el-form-item  label="收支描述:">
            <el-input type='describe' v-model="formData.describe"></el-input>
          </el-form-item>
          <el-form-item  label="收入:">
            <el-input type='income' v-model="formData.income"></el-input>
          </el-form-item>
          <el-form-item  label="支出:">
            <el-input type='expend' v-model="formData.expend"></el-input>
          </el-form-item>
                    <el-form-item  label="账户现金:">
            <el-input type='cash' v-model="formData.cash"></el-input>
          </el-form-item>
          <el-form-item  label="备注:">
            <el-input type='remark' v-model="formData.remark"></el-input>
          </el-form-item>
      <el-form-item class="text_right">
            <el-button @click="dialog.show = false">取消</el-button>
            <el-button type="primary" @click="onSubmit('form')">提交</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>
 

<script>
export default {
  name: "dialogs",
  data() {
    return {
      format_type_list: ["提现", "充值", "转账"],
      form_rules: {
        describe: [
          {
            required: true,
            message: "收支描述不能为空",
            trigger: "blur",
          },
        ],
        income: [
          {
            required: true,
            message: "收入不能为空",
            trigger: "blur",
          },
        ],
        expend: [
          {
            required: true,
            message: "支出不能为空",
            trigger: "blur",
          },
        ],
        cash: [
          {
            required: true,
            message: "账户不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    dialog: Object,
    formData: Object,
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          //判断是添加还是编辑
          const url =
            this.dialog.option === "add" ? "add" : `edit/${this.formData.id}`;
          //   console.log(this.formData);
          this.$axios
            .post(`/api/profiles/${url}`, this.formData)
            .then((res) => {
              //添加成功
              this.$message({
                message: "数据添加成功",
                type: "success",
              });
              //隐藏dialog
              this.dialog.show = false;
              //添加成功后自动刷新
              this.$emit("update");
            });
        }
      });
    },
  },
};
</script>
<style scoped>
</style>